<template>
  <div class="dashboard-content" style="position:absolute;width:100%;">
    <el-card shadow="none" :body-style="{padding: '0px', position:'absolute', height:'100%', width: '100%'}">
      <div class="card-box clearfix" style="height:100%;">
        <div slot="header" class="clearfix card-title">
          <span>{{content.name}}</span>
          <el-button class="btn-more" type="text">更多 <i class="el-icon-d-arrow-right"></i></el-button>
        </div>
        <template>
          <div>
            <div class="tabs-content-box" style="width: 32%; height: 100%;float:left;">
              <!--<div id="chart" :style="{width: '100%', height: '100%'}" auto-resize></div>-->
              <v-chart :options="barOption" :style="{width: '100%', height: '240px'}" :autoresize="true"> </v-chart>
            </div>
            <div class="tabs-content-box" style="width: 66%; height: 100%;float:right;">
              <template>
                <div>
                  <div class="info bgZc">
                      <div class="part-1"><span>资产总额</span><span class="specific">{{assetInfoDwList.assetZe}}</span></div>
                      <div class="part-Border"></div>
                      <div class="part-1"><span>固定资产</span><span class="specific">{{assetInfoDwList.assetGd}}</span><span class="rate"><i :class="assetInfoDwList.assetGdChange"></i>{{assetInfoDwList.assetZdChangeZ}}</span></div>
                      <div class="part-1"><span>重点资产</span><span class="specific">{{assetInfoDwList.assetZd}}</span><span class="rate"><i :class="assetInfoDwList.assetZdChange"></i>{{assetInfoDwList.assetGdChangeZ}}</span></div>
                  </div>
                  <div class="info">
                      <div class="part-1"><span>负债总额</span><span class="specific">{{assetInfoDwList.liabilities}}</span></div>
                      <div class="part-1"><span>净资产总额</span><span class="specific">{{assetInfoDwList.assetJZe}}</span></div>
                      <div class="part-1"><span>资产负债率</span><span class="specific">{{assetInfoDwList.liabilitiesRate}}</span></div>
                  </div>
                  <div class="notes"><i class="el-icon-warning"></i>说明:<span>{{assetInfoDwList.notes1}}</span></div>
                  <div class="notes"><i class="el-icon-success green"></i>{{assetInfoDwList.notes1}}</div>
                </div>
              </template>
            </div>  
          </div> 
        </template>
      
      </div>
    </el-card>
  </div>
</template>

<script>
//let echarts = require('echarts/lib/echarts');
import ECharts from '~/static/js/vue-echarts';
import { assetInfoDw } from './data/Content.js';
//import option from '/portal/data/ChartsData.json';
require('echarts/lib/chart/bar');
require('echarts/lib/chart/line');
require('echarts/lib/chart/pie');
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');
require('echarts/lib/component/legend');
export default {
    name: 'AssetInfoDw',
    props: ['content'],
    data(){
        return {
            barOption: {},
            assetInfoDwList: []
        };
    },
    components: {
        'v-chart': ECharts
    },
    created:function (){
        this.getAssetInfoList();
    },
    methods: {
        getAssetInfoList(){
            this.$axios.get(assetInfoDw.url2)
                .then(res => {
                    this.assetInfoDwList = res.data[0];
                });
        }
    },
    mounted() {
        this.$axios.get(assetInfoDw.url1)
            .then(res => {
                this.barOption = res.data;
            });
    }
};
</script>
<style scoped lang="scss">
  .card-box {

    .info{
      font-size:14px;
      padding:6px 0;
      color:#333;
      padding:15px 2%;
      margin-top:5px;
    }
    .bgZc{
      background:#F8F8F8;
      border-radius:4px;
    }
    .part-1{
      display: inline-block;
      width:28%;
      padding-left:5%;
    }
    .part-1 span{
      display:block;
      padding-left:3%;
    }
    .part-Border{
      border-right:2px solid #ddd;
      display: inline-block;
      height: 40px;
    }
    .part-1 span.specific{
      color:#0066FF;
      font-size:18px;
      display: inline-block;
    }
    .part-1 span.rate{
      color:#E02020;
      font-size:14px;
      display: inline-block;
    }
    .notes{
      font-size:14px;
      padding:6px 0;
    }
    .notes span{
      color:#E02020;
    }
    .notes i{
      color:#0066FF;
      margin-right:6px;
    }
    .notes i.green{
      color:#00CC66;
    }
  }
  
</style>
